<template>
    <div>
        <div v-for="(content, i) in typeData" :key="i" class="card-block">
          <div class="card-type">{{content.mainTitle}}</div>
          <div span="11"  v-for="(item, j) in content.children" :key="j" class="card-style" v-on:click="goToProject(item.subTypeRefid)">
            <Card :bordered="true" dis-hover >
              <p slot="title">{{item.subTitle}}</p>
            </Card>
          </div>
        </div>
    </div>
</template>

<script>
  import { GetMainSubTypes } from '../../api/getData'
  import { Card } from 'view-design'
  export default {
    name: 'ProjectList',
    components: {
      Card,
    },
    data() {
      return {
        typeData: [
          // {
          //   mainTitle: "type1", mainTypeRefid: '', children: [
          //   {
          //     subTypeRefid: '', subTitle: 'hah'
          //   }
          //   ]
          // },
          // {
          //   mainTitle: "type2", children: [
          //   {
          //     subTypeRefid: '', subTitle: 'hah'}, {subTypeRefid: '', subTitle: 'hah'
          //   }
          //   ]
          // },
          // {
          //   mainTitle: "type3", content: [
          //     {title: 'title', desc: 'description', name: '/url'}
          //   ]
          // }
        ]
      }
    },
    mounted() {
      this.getMainAndSubTypes()
    },
    methods: {
      goToProject(refid) {
        this.$router.push({name: 'topic', params: {refid: refid}})
      },
      getMainAndSubTypes () {
        GetMainSubTypes({}, result => {
          if (result.errorCode === 'OK') {
            this.typeData = []
            for (let i = 0; i < result.data.length; i++) {
              let item = result.data[i]
              let hasExist = false
              let existIndex = 0
              for (let j = 0; j < this.typeData.length; j++) {
                if (this.typeData[j].mainTypeRefid === item.blogMainTypeRefid) {
                  hasExist = true
                  existIndex = j
                  break
                }
              }
              if (hasExist) {
                if (this.typeData[existIndex].children === null) {
                  this.typeData[existIndex].children = []
                }
                this.typeData[existIndex].children.push(
                  { subTypeRefid: item.blogSubTypeRefid, subTitle: item.subTypeName }
                )
              } else {
                this.typeData.push(
                  {
                    mainTypeRefid: item.blogMainTypeRefid,
                    mainTitle: item.mainTypeName,
                    children: [ { subTypeRefid: item.blogSubTypeRefid, subTitle: item.subTypeName } ]
                  }
                )
              }
            }
          }
        })
      }
    }
  }
</script>

<style scoped >
.card-block {
    display: block;
    text-align: left;
}
.card-type {
    text-align: left;
}
.card-style {
    width: 18%;
    margin: 3%;
    display: inline-block!important;
}

</style>
